<template>
  <div class="app-container ssIndex">
    <!-- 我是 赛事 -->
    <div class="banner">
      <el-carousel height="350px">
        <el-carousel-item>
          <img src="/img/banner.jpg">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="kind">
      <div class="box">
        <ul>
          <li>
            <label class="titleLabel">类型：</label>
            <el-radio-group v-model="query.projectId" @change="getList">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button
                v-for="p in projectList"
                :key="p.id"
                :label="p.id"
              >{{ p.name }}</el-radio-button>
            </el-radio-group>
          </li>
          <li>
            <label class="titleLabel">状态：</label>
            <el-radio-group
              v-model="query.progressStatusCode"
              @change="getList"
            >
              <el-radio-button label="-1">全部</el-radio-button>
              <el-radio-button label="2">报名中</el-radio-button>
              <el-radio-button label="4">赛事进行中</el-radio-button>
              <el-radio-button label="3">即将开始</el-radio-button>
              <el-radio-button label="5">已结束</el-radio-button>
            </el-radio-group>
          </li>
          <li>
            <label class="titleLabel">时间：</label>
            <el-radio-group v-model="query.month" @change="getList">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="m in monthList" :key="m" :label="m" />
            </el-radio-group>
          </li>
        </ul>
      </div>
    </div>

    <div class="box">
      <div class="listTitle">
        <h3>赛事列表</h3>
        <div class="search">
          <el-input
            v-model="query.name"
            placeholder="请输入赛事名称查询"
            class="input-with-select" @change="getList"
          >
            <template #append>
              <el-button type="success" round @click="getList">查询</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <el-row :gutter="20" class="pt-20">
        <el-col v-for="n in list" :span="8">
          <div class="matchItem" @click="goDetail(n.id)">
          
            <el-image class="matchCover" :src="n.coverUrl" fit="cover" />
            <div class="info">
              <h3>{{ n.name }}</h3>
              <p v-if="n.type == '1'">
                <el-icon :size="20">
                  <Checked />
                </el-icon>报名时间：{{ n.signBeginTime?.substring(0,10) }} - {{ n.signEndTime?.substring(0,10) }}
              </p>
              <p v-if="n.type == '0'">
                <el-icon :size="20">
                  <Failed />
                </el-icon>
                报名截止：{{ n.signEndTime.substring(0,10) }}
              </p>
              <p >
                <el-icon :size="20">
                  <Flag />
                </el-icon>
                比赛时间：{{ n.beginTime.substring(0,10) }} - {{ n.endTime.substring(0,10) }}
              </p>
              <p v-if="n.type == '1'">
                <el-icon :size="20">
                  <Opportunity />
                </el-icon>分站赛：<span class="text-primary">{{ n.cptsSize }}</span> 场
              </p>
              <p v-if="n.type == '0'">
                <el-icon :size="20">
                  <LocationFilled />
                </el-icon>
                比赛地点：{{ n.address }}
              </p>
              <p class="textBottom">
                <span v-if="n.type == '0'" class="typeTag blue">独立赛</span> 
                <span v-else class="typeTag">联赛</span> 
                <el-tag v-if="n.progressStatusCode == 3" type="warning" effect="dark">即将开始</el-tag>
                <el-tag v-if="n.progressStatusCode == 2" type="danger" effect="dark">报名中</el-tag>
                <el-tag v-if="n.progressStatusCode == 4" effect="dark">赛事进行中</el-tag>
                <el-tag v-if="n.progressStatusCode == 5" type="info" effect="dark">已结束</el-tag>
                <el-tag v-if="n.progressStatusCode == 1" type="info" effect="dark">报名未开始</el-tag>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-empty v-if="list.length == 0" description="暂无数据" />

      <!--      <el-pagination-->
      <!--        layout="prev, pager, next"-->
      <!--        :total="50"-->
      <!--        :hide-on-single-page="true"-->
      <!--      />-->
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { reactive, onMounted } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import { dayjs } from 'element-plus'
const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/api/match/pc'

const typeList = ref([{ label: '全部', id: '0' }])
const list = ref([])
const projectList = ref([])
const monthList = ref([])
const activeName = ref('')
const total = ref(0)
const query = ref({
  projectId: '',
  progressStatusCode: '',
  month: ''
})
onMounted(() => {
  activeName.value = typeList.value[0].id
  getMonthList()
  getList()
  getProjectList()
})

function getProjectList() {
  match.projectConfigList().then((res) => {
    projectList.value = res.rows
  })
}

function getMonthList() {
  // const date = new Date()
  const arr = []
  // 获取年
  let year = dayjs().year()
  // 获取月
  let mon = dayjs().month() - 6
  if (mon < 1) {
    year = year - 1
    mon = 12 + mon
  }
  for (var i = 0; i <= 11; i++) {
    if (++mon > 12) {
      mon = 1
      year++
    }
    if (mon < 10) {
      mon = '0' + mon
    }
    // console.log(year + '-' + mon)
    arr.push(year + '-' + mon)
  }
  monthList.value = arr
}

function getList() {
  match.getMaList(query.value).then((res) => {
    list.value = res.rows
    total.value = res.total
  })
}

function goDetail(id) {
  const routeData = router.resolve({
    path: `list/${id}`
  })
  window.open(routeData.href, '_blank')
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.module.scss';
.app-container {
  background: #f5f7f9;
  padding: 0;
}

.matchItem {
  cursor: pointer;
  margin-bottom: 20px;
  min-height: 180px;
  background: #ffffff;
  // position: relative;
  border-radius: 10px;
  .el-icon {
    color: rgba(210, 215, 217, 1);
    margin-right: 4px;
  }

  .el-tag {
    margin-left: 6px;
  }

  :deep(.matchCover) {
    // position: absolute;
    --el-avatar-bg-color:#fff;
    left: 15px;
    top: 15px;
  }

  .info {
    //padding: 12px 0 0 230px;

    p {
      font-size: 14px;
      display: flex;
      width:100%;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .typeTag {
    // position: absolute;
    right: 0;
    top: 0;
    //border-radius: 0px 10px 0px 10px;
    border-radius: 4px;
    padding: 2px 12px;
    background: #ff8124;
    font-size: 14px;
    color: #fff;
  }
  .typeTag.blue {
    background: #00a0e9;
  }
  h3 {
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    width:100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // &:hover h3 {
  //   font-weight: bold;
  // }
}

.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  margin: 0 0 30px;

  ul {
    list-style: none;
    padding: 30px 0 10px;

    li {
      margin: 0 0 20px;
      display: flex;
      align-items: center;
      &>label{width: 4em}
      .titleLabel{
        width: 5em;
        position:relative;
        padding-left:15px
      }
      .titleLabel::before {
        position: absolute; /*绝对定位*/
        top: 50%; /*Y轴方向偏移自身高度的50%*/
        transform: translatey(-40%); /*Y轴方向偏移微调*/
        left:0; /*紧靠容器左边缘*/
        content: ''; /*伪元素需要有内容才能显示*/
        width: 3px; /*伪元素宽度*/
        height: 18px; /*伪元素高度*/
        background-color: $--color-primary; /*伪元素颜色*/

     }
    }
  }
}
.ssIndex{
  .kind {
    ul{
      padding-top:10px;
      li{
      margin:0;
      padding:20px 0;
      border-bottom:1px solid #ddd;
    }
    li:last-child{
      border-bottom:none;
    }
    }
   
  }
  .matchItem{
    display: flex;
    flex-direction: column;
    padding:20px;
    .matchCover{
      position: static;
      height:230px;
    }
    .textBottom{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-tag{
      height:40px;
      min-width:90px;
      border-radius: 20px;
      font-size:18px;
    }
  }
}
.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
